<!doctype html>
<html>
	<head>
		<title> Test PUI style with angular -- fieldset </title>
		<link rel="stylesheet" href="../jquery-ui/jquery-ui-1.9.2.custom.min.css" />
		<link rel="stylesheet" href="../production/primeui-1.0-min.css" />
		<link rel="stylesheet" href="../themes/aristo/theme.css" />
	</head>

	<body ng-controller="MainCtrl">

	<fieldset pui-fieldset="" style="margin-bottom: 6px;">
		<legend>AAA</legend>
		<div>
		content
		</div>
	</fieldset>

	<fieldset pui-fieldset="" data-toggle="true">
		<legend>BBB</legend>
		<div>
		content content
		</div>
	</fieldset>
	
	<script type="text/javascript" src="angular.min.js"></script>
	<script language="javascript">
	var md = angular.module('md', []);

	md.directive('puiFieldset', function(){
		return {
			compile: function(el, attrs){
				el.addClass('pui-fieldset ui-widget ui-widget-content ui-corner-all');
				el.find('legend').eq(0).addClass('pui-fieldset-legend ui-corner-all ui-state-default');
				el.find('div').eq(0).addClass('pui-fieldset-content');

				if(attrs.toggle){
					el.addClass('pui-fieldset-toggleable');

					var legend = el.find('legend').eq(0);
					var srcLegend = legend.html();
					var spTpl = '<span class="pui-fieldset-toggler ui-icon ui-icon-minusthick"></span>';
					legend.html(spTpl + srcLegend);

					var content = el.find('div').eq(0);
					legend.on('click', function(e){
						var sp = legend.find('span');
						if(sp.hasClass('ui-icon-minusthick')){
							sp.removeClass('ui-icon-minusthick').addClass('ui-icon-plusthick');
							content.css({display: 'none'});
						}else{
							sp.removeClass('ui-icon-plusthick').addClass('ui-icon-minusthick');
							content.css({display: 'block'});
						}
					});
				}
			}
		};
	});

	// ******************
	md.controller('MainCtrl', function($scope, $timeout){
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>